<template>
  <div id="businessman">
    <div class="businessmanMsg">
      <span>商家</span>
      <input type="text" placeholder="请输入姓名" v-model="name">
    </div>
    <!-- <div class="businessmanMsg">
      <span>证件号</span>
      <input type="text" placeholder="请输入证件号" v-model="certificates">
    </div> -->
    <div class="businessmanMsg">
      <span>联系电话</span>
      <input type="text" placeholder="请输入联系电话" v-model="phone">
    </div>
    <div class="businessmanMsg licenseImg">
      <span>营业执照照片</span>
      <div>
        <div class="imgbox">
          <!-- <img src="@/assets/img/img_fbpl_pzsc.png" alt v-if="showfimg == 0"> -->
          <img :src="zimg" alt @click="upimgz" class="upimgs">
          <!-- <van-uploader :after-read="onReadz" class="upimg" multiple>
            <van-icon name="photograph"/>
          </van-uploader>-->
          <span class="uptit">点击上传正面</span>
        </div>
        <!--<div class="imgbox" style=”display:none”> -->
        <!-- <img src="" alt v-if="showfimg == 0"> -->
        <!--<img :src="fimg" alt @click="upimgf" class="upimgs">
        <!-- <van-uploader :after-read="onReadf" class="upimg">
          <van-icon name="photograph"/> -->
        <!--</van-uploader>-->
        <!--<span class="uptit">点击上传反面</span>
      <!--</div> -->
      </div>
    </div>
    <div class="businessmanMsg">
      <span>经营范围</span>
      <input type="text" placeholder="请输入经营范围" v-model="businessScope">
    </div>
    <div class="businessmanMsg">
      <span>省市区</span>
      <input type="text" placeholder="请选择省市区" v-model="ssq" @focus="Suk_choosessq">
    </div>
    <van-popup v-model="show" position="bottom">
      <van-area :area-list="areaList" @confirm="Suk_checkarea" @cancel="Suk_cancel"/>
    </van-popup>
    <div class="businessmanMsg">
      <span>店铺地址</span>
      <input type="text" placeholder="请输入店铺地址" v-model="address">
    </div>
    <div class="businessmanMsg">
      <span>分类</span>
      <input type="text" placeholder="请选择分类" v-model="textfl" @focus="Suk_choosefl">
    </div>
    <van-popup v-model="show2" position="bottom">
      <van-picker
        show-toolbar
        title="分类"
        :columns="list"
        @cancel="Suk_cancel2"
        @confirm="Suk_choosessq2"
      />
    </van-popup>
    <div class="sub" @click="sub">提交审核</div>
  </div>
</template>
<script>
import areaList from "@/assets/area.js";

export default {
  name: "businessman",
  data() {
    return {
      show: false,
      show2: false,
      ssq: '',
      fl: 0,
      textfl:"",
      list:[],
      showzimg: 0,
      showfimg: 0,
      name: "", //姓名
      // certificates: "", //证件号
      phone: "", //电话
      businessScope: "", //经营范围
      address: "", //店铺地址
      zimg: require("@/assets/img/img_fbpl_pzsc.png"),
      fimg: require("@/assets/img/img_fbpl_pzsc.png"),
      areaList
    };
  },
  created() {
    var that=this
    that.axios
      .post(that.baseUrl + "/large/query", {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(function (res) {
        if (res.request.status === 200) {
          if (res.data.meta.code == 200) {
            var text
            for (let a = 0; a < res.data.data.length; a++) {
              that.list.push({
                text:res.data.data[a].largeName,
                fl:res.data.data[a].largeId
              })
            }
          } else if (res.data.meta.code == 501) {
          }
        }
      });
  },
  methods: {
    Suk_cancel() {
      let that = this;
      that.show = false;
    },
    Suk_cancel2() {
      let that = this;
      that.show2 = false;
    },
    Suk_choosessq2(e) {
      debugger
      let that = this;
      that.fl = e.fl;
      that.textfl = e.text
      that.show2 = false;

    },
    Suk_checkarea(e) {
      let that = this;
      that.ssq = e[0].name + " " + e[1].name + " " + e[2].name;
      that.show = false;
    },
    Suk_choosessq() {
      let that = this;
      that.show = true;
    },
    Suk_choosefl() {
      let that = this;
      that.show2 = true;
    },
    // 上传图片
    upimgz() {
      // this.showzimg = 1
      // this.zimg = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547882174477&di=31b5bba04f4da5d3f4126ff93f4e85e7&imgtype=0&src=http%3A%2F%2Fthumb210.jfcdns.com%2Fn131929c23812%2F16f5c01f7c1049c3.jpeg"
      let that = this;
      dsBridge.call("uploadImg", 1);
      dsBridge.register("addImgCallback", function (data) {
        that.zimg = data
        // alert(that.zimg)
        // let str = JSON.parse(data)
        // that.$toast.loading({
        //   message: "加载中..."
        // });
        // alert("12132")
        var Sukdata = {
          zurl: data
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function (res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                // alert(123);
                that.showzimg = 1
                that.zimg = res.data
                // alert(res.data)
                // alert(that.zimg)
                // that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      });
    },
    upimgf() {
      let that = this;
      dsBridge.call("uploadImg", 2);
      dsBridge.register("addImgCallback", function (data) {
        that.fimg = data
        // alert(that.zimg)
        console.log(data);
        let str = JSON.parse(data)
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
          zurl: str
        };
        console.log(Sukdata);
        that.axios
          .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function (res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                that.back = res.data
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      });
    },
    onReadz(file) {
      console.log(file.file.name);
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        zurl: file.file.name
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    onReadf(file) {
      console.log(file.file.name);
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        zurl: file.file.name
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/store/storeZheng", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function (res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.$toast.clear();
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },
    sub() {
      var that = this;
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (
        this.name == "" ||
        this.ssq == "" ||
        this.fl == 0 ||
        // this.certificates == "" ||
        this.phone == "" ||
        this.businessScope == "" ||
        this.address == ""
      ) {
        that.$toast("请完善资料");
      } else if (!myreg.test(that.phone)) {
        that.$toast("请输入正确手机号");
      } else {
        let that = this;
        var obj = {
          userId: localStorage.getItem("userid"),
          phone: that.phone,
          name: that.name,
          range: that.businessScope,
          address: that.ssq + " " + that.address,
          fl: that.fl,
          notice: that.certificates,
          zheng: that.zimg,
          fan: that.zimg
        };
        that.axios
          .post(that.baseUrl + "/store/changeStore", that.Qs.stringify(obj), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function (res) {
            if (res.request.status === 200) {
              console.log(res.data);
              if (res.data.meta.code == 200) {
                that.$toast("申请成功，等待后台审核");
              } else {
                that.$toast(res.data.meta.msg);
              }
            }
          });
      }
    }
  }
};
</script>
<style scoped>
.businessmanMsg {
  display: flex;
  align-items: center;
  width: 100%;
  border-top: 5px solid #ebebeb;
  padding-bottom: 15px;
  padding-top: 15px;
}

.upimg {
  display: inline-block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  text-align: center;
  height: 2rem;
}

.businessmanMsg > span {
  display: block;
  float: left;
  margin-left: 15px;
  text-align: left;
  width: 20%;
  font-size: 16px;
}

.businessmanMsg > input {
  font-size: 16px;
  border: 0;
}

.licenseImg > span {
  width: 50%;
}

.licenseImg > div {
  width: 70%;
  margin: 0 auto;
  margin-top: 40px;
  height: 100px;
  position: relative;
}

.licenseImg:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.licenseImg > div img {

}

.licenseImg > div > img:first-child {
  position: absolute;
  left: 0;
  top: 0;
}

.licenseImg > div > img:last-child {
  position: absolute;
  right: 0;
  top: 0;
}

.sub {
  width: 90%;
  margin: 0 auto;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background: #ff2f4e;
  color: #fff;
  border-radius: 20px;
  font-size: 16px;
  margin-top: 40px;
}

.imgbox {
  display: inline-block;
  position: relative;
  width: 40%;
}

.uptit {
  position: absolute;
  font-size: 0.3rem;
  width: 100%;
  text-align: center;
  bottom: 0.2rem;
}

.upimgs {
  width: 2.4rem;
  height: 1.8rem;
}
</style>

